import React, { CSSProperties } from 'react'
import SearchNav from './SearchNav/SearchNav'
import HomeSwiper from './HomeSwiper/HomeSwiper'
import IconGroups from './IconGroups/IconGroups'
import Banner from './Banner/Banner'
import Guess from './Guess/Guess'
import Scroll from "../../components/Scroll/Scroll";
import PubSub from 'pubsub-js'

const style1: CSSProperties = {
    background: 'rgb(214,185,250)',
    position: 'relative'
}
const style1_1: CSSProperties = {
    padding: '2vh 2vw'
}
const scrollStyle: CSSProperties = {
    position: 'absolute',
    top: '9vh',
    left: 0,
    right: 0,
    bottom: '56px',
    overflow: 'hidden'
}
const Home = () => {
    //获取bs对象
    const scroll = React.useRef()
    //触底操作
    const handleOnFoot = () => {
        console.log('加载更多');
        (scroll.current as any).endPullUp();
    }
    React.useEffect(() => {
        PubSub.subscribe('onBottom',(_,data) => {
            handleOnFoot()
        })
        PubSub.subscribe('onTop',(_,data) => {
            (scroll.current as any).endPullDown();
        })

        return () => {
            //卸载组件时移出监听器
            PubSub.clearAllSubscriptions()
        }
    },[ ])

    return (
        <div style={{
            paddingBottom: '56px'
        }}>
            {/* 搜索框 */}
            <SearchNav />
            <Scroll style={scrollStyle} ref={scroll} content={
                <>
                    <div style={style1}>
                        <div style={style1_1}>
                            <HomeSwiper />
                        </div>
                        <IconGroups />
                        <Banner />
                    </div>

                    {/* 主体部分 */}
                    <div style={{
                        backgroundColor: 'rgb(247,247,247)'
                    }}>
                        {/* 猜你喜欢 */}
                        <Guess />
                    </div>
                </>
            } />
            {/* 轮播图、按钮、横幅三部分 */}
        </div>
    )
}

export default Home